<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
  <div class="content-header ">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">角色管理</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        
        <div class="funcbtn clearfix">
          <div class="pull-left"><a class="btn btn-primary" href="#"  data-toggle="modal" data-target="#myModal">添加业务人员</a></div>
        </div>
        <div class="row">
          <div class="col-md-8">
            <div class="col-sm-5">
              <input
                type="text"
                class="form-control swich"
                id="userName"
                placeholder="用户名"
              />
            </div>
            <div class="col-sm-5">
              <input
                type="text"
                class="form-control swich"
                id="phone"
                placeholder="电话号码"
              />
            </div>
            <button class="btn btn-danger sreach">搜索</button>
          </div>
          <div class="col-md-3">
          </div>
        </div>
        <div class="tablebox1">
          <table class="table">
            <thead>
             <tr>
		                <td>编号</td>
		                <td>用户名</td>
		                <td>职位</td>
		                <td>邮箱</td>
		                <td>联系电话</td>
		                <td>工资</td>
		                <td>操作</td>
	                </tr>
            </thead>
            <tbody id="showMessage">
              
            </tbody>
          </table>
 
          <div class="row">
            <div id="show_page_info" class="col-md-4" style="line-height: 80px">
              </div>
              <div id="show_page_nav" class="col-md-8 text-right">
                <nav aria-label="Page navigation">
                  <ul class="pagination" id="pagination">
                    
                  </ul>
                </nav>
              </div>
        </div>
		  </div>
      </div>
    </div>
  </div>
</div>
	
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">业务人员信息</h4>
      </div>
      <div class="modal-body">
       <div class="form1 form2" >
        <form id="addFrom"  enctype="multipart/form-data">
          <div class="form-group">
            <span>用户名</span><input type="text" class="form-control" value=" " name="empName">
          </div>
          <div class="form-group">
            <span>职位</span><input type="text" class="form-control" value=" " name="position">
          </div>
          <div class="form-group">
            <span>电话</span><input type="text" class="form-control" value=" " name="phoneNumber">
          </div>
          <div class="form-group">
            <span>邮箱</span><input type="text" class="form-control" value=" " name="email">
          </div>
        </form>
				</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary aad" data-dismiss="modal">保存</button>
      </div>
    </div>
  </div>
</div>
	
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">修改业务人员信息</h4>
      </div>
      <div class="modal-body">
        <div class="form1 form2" >
         <form>
          <div class="form-group">
            <span>编号</span><input type="text" class="form-control" value=" " id="ids" disabled>
          </div>
           <div class="form-group">
             <span>用户名</span><input type="text" class="form-control" value=" " id="empNames">
           </div>
           <div class="form-group">
             <span>职位</span><input type="text" class="form-control" value=" " id="positions">
           </div>
           <div class="form-group">
             <span>电话</span><input type="text" class="form-control" value=" " id="phoneNumbers">
           </div>
           <div class="form-group">
             <span>邮箱</span><input type="text" class="form-control" value=" " id="emails">
           </div>
         </form>
         </div>
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
      </div>
    </div>
  </div>
</div>
	
<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script> 
<script>
$(document).ready(function(){
  $(".ewm").click(function(){
    $(this).toggleClass("active")
  });
});
</script>

<script>
          $(function(){
            var empName = "";
            var phoneNumber = "";
            var pageNum = 1;
            onleadOk(empName,phoneNumber,pageNum);
        })

        function onleadOk(empName,phoneNumber,pageNum){
          $.ajax({
            url:'http://localhost:24080/Shopping749/employees/page',
            type:'get',
            data:{
                    empName:empName,
                    phoneNumber:phoneNumber,
                    pageNum:pageNum,
                },
            dataType:'json',
            success:function(data){
              console.log(data);
              let pageInfo = $("#show_page_info");
              pageInfo.empty();
              let span = `当前${data.data.pageNum}页,总${data.data.pages}页,总共${data.data.total}条`;
              pageInfo.append(span);
              //分页列
              let pagination = $("#pagination");
              pagination.empty();

              //判断是否是首页
              let firstdis = data.data.isFirstPage ? "disabled" : "";

              //判断是否是末页
              let enddis = data.data.isLastPage ? "disabled" : "";

              //首页
              let firstLi = `<li class="${firstdis}" jumpPageNum="1">
                              <a href="javascript:;"><span>首页</span></a>
                              </li>`;
              pagination.append(firstLi);

              let firstLiIcon = `<li class="${firstdis}" jumpPageNum="1">
                                  <a href="javascript:;"><span>&laquo;</span></a>
                                  </li>`;
              pagination.append(firstLiIcon);


                    //循环页码
             for (var i = 1; i <= data.data.pages; i++) {
                    let active = '';
                      if (i == data.data.pageNum) {
                          active = 'active';
                      }
             let li = `<li class='${active}' jumpPageNum="${i}">
                          <a href="javascript:;"><span>${i}</span></a>
                        </li>`;
                    pagination.append(li);
              }

                    //末页
            let endLiIcon = `<li class="${enddis}" jumpPageNum="${data.pages}">
                                  <a href="javascript:;"><span>&raquo;</span></a>
                              </li>`;
                pagination.append(endLiIcon);

            let endLi = `<li class="${enddis}" jumpPageNum="${data.pages}">
                              <a href="javascript:;">末页</a>
                          </li>`;
            pagination.append(endLi);
            var tbody = $('#showMessage');
            $(tbody).empty(); 
              data.data.list.forEach(function(employees) {
                        var row = `<tr>
                                <td>${employees.employeeId}</td>
                                <td>${employees.empName}</td>
                                <td>${employees.position}</td>
                                <td>${employees.email}</td>
                                <td>${employees.phoneNumber}</td>
                                <td>${employees.salary}</td>
                                 <td>
                                     <button class="btn btn-primary rev" onclick="updateBook(${employees.employeeId})">修改</button>
                                     <button class="btn btn-danger del" onclick="deleteUser(${employees.employeeId})">删除</button>
                                 </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });
            }
          })
        }


        //删除角色信息
        $(document).on("click","del",function(){
          $(this).parents("tr").remove();
        })
        function deleteUser(employeeId){
            alert(employeeId)
            $.ajax({
                url:'http://localhost:24080/Shopping749/employees/'+employeeId,
                type:'Delete',
                success:function(data){
                        console.log(data)
                        alert("删除成功");
                        onleadOk("", "",1); // 刷新列表
                }
            })
        }

            //点击页码 局部刷新
            $(document).on("click", "#pagination li", function () {
            console.log($(this));
            var empName = $("#empName").val();
            var phone = $("#phone").val();
            onleadOk(empName, phone, $(this).attr("jumpPageNum"));
        });


        //增加的功能
        // 在点击增加按钮时处理数据并发送
        $(document).on("click", ".aad", function () {
             //获取表单元素
            let form = document.querySelector("#addFrom");
            let formData = new FormData(form);
            // 使用JSON.stringify来确保发送的是一个JSON字符串
            $.ajax({
                url: 'http://localhost:24080/Shopping749/employees',
                type: 'post',
                data: formData, // 发送JSON格式的数据
                cache: false,//设置false就不会读取缓存了 不需要从浏览器缓存
                processData: false,// 告诉jQuery不要去处理发送的数据
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头

                success: function (data) {
                    console.log(data);
                    alert('新增成功！')
                    onleadOk("", "",1); // 刷新列表
                }
            });
        });

        //查的功能
        $(".sreach").click(function () {
            var name = $("#userName").val();
            var phone = $("#phone").val();
            onleadOk(name,phone,1)
        })


          //修改功能
        let employees = {}
        function updateBook(id) {
            alert(id);
            $.ajax({
                url:'http://localhost:24080/Shopping749/employees/'+id,
                type:"get",
                contentType: 'application/json',
                success: function(data){
                    console.log(data)
                    $('#ids').val(data.employeeId);
                    $("#empNames").val(data.empName);
                    $("#positions").val(data.position);
                    $("#phoneNumbers").val(data.phoneNumber);
                    $("#emails").val(data.email);
                    employees = JSON.stringify(data);
                    $('#myModal1').modal("show");
                }
            })
            
        }
        
      //JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。

      //JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

        $(document).on("click", ".olk", function () {
            console.log(employees);
            employees = JSON.parse(employees);
            employees.empName = $("#empNames").val();
            employees.position = $("#positions").val();
            employees.phoneNumber = $("#phoneNumbers").val();
            employees.email = $("#emails").val();

            $.ajax({
                url: 'http://localhost:24080/Shopping749/employees',
                type: 'put',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(employees), // 发送JSON格式的数据
                success: function(data) {
                    console.log(data);
                    if (data === 1) {
                        alert('修改成功');
                        onleadOk('', '',1); // 刷新列表
                    }
                }
            });
        })
</script>
</body>
</html>